<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>编辑商品</div>
				</div></el-col
			>
		</el-row>
		<div style="margin: 20px;"></div>
		<el-form
			:model="listQuery"
			label-width="120px"
			:rules="rules"
			ref="ruleForm"
			class="demo-ruleForm"
			label-position="left"
		>
			<el-form-item label="商品分类" prop="product_category_id">
				<el-cascader v-model='productCateValue' :options="productCateOptions">
				</el-cascader>
			</el-form-item>
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="listQuery.name" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="副标题" prop="sub_title">
				<el-input v-model="listQuery.sub_title" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="商品品牌" prop="brand_id">
				<el-select
					v-model="listQuery.brand_id"
					placeholder="全部"
					style="width:250px;"
				>
					<el-option
						v-for="item in brandOptions"
						:label="item.name"
						:value="item.id"
						:key="item.id"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品介绍" prop="description">
				<el-input
					type="textarea"
					v-model="listQuery.description"
					style="width:500px;"
				></el-input>
			</el-form-item>
			<el-form-item label="图片链接地址" prop="pic">
				<el-input v-model="listQuery.pic" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="商品货号" prop="product_sn">
				<el-input
					v-model="listQuery.product_sn"
					style="width:500px;"
				></el-input>
			</el-form-item>
			<el-form-item label="商品售价" prop="price">
				<el-input v-model="listQuery.price" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="市场价" prop="original_price">
				<el-input
					v-model="listQuery.original_price"
					style="width:200px;"
				></el-input>
			</el-form-item>
			<el-form-item label="商品库存" prop="stock">
				<el-input v-model="listQuery.stock" style="width:200px;"></el-input>
			</el-form-item>
			<el-form-item label="计量单位" prop="unit">
				<el-input v-model="listQuery.unit" style="width:200px;"></el-input>
			</el-form-item>
			<el-form-item label="商品重量" prop="weight">
				<el-input v-model="listQuery.weight" style="width:200px;"></el-input>克
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input v-model="listQuery.sort" style="width:100px;"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>修改</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import {
	updateProduct,
	fetchOneProduct,
	fetchParentProductCate,
} from "@/api/product";
import productmixing from "./productmixing";
export default {
	name: "productupdate",
	data() {
		return {
			labelPosition: "left",
			listQuery: {
				
			},
			rules: {
				//验证规则
				product_category_id: [
					{ required: true, message: "请选择分类", trigger: "blur" },
				],
				name: [
					{ required: true, message: "请输入商品名称", trigger: "blur" },
					{ min: 3, max: 50, message: "长度在3-50个字符之间", trigger: "blur" },
				],
				sub_title: [
					{ required: true, message: "请输入副标题名称", trigger: "blur" },
				],
				brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
				description: [
					{ required: true, message: "请输入商品介绍", trigger: "blur" },
				],
				pic: [
					{ required: true, message: "请输入图片链接地址", trigger: "blur" },
				],
			},
		};
	},
	methods: {
        async getOneProduct(){
            let res = await fetchOneProduct({id:this.$route.params.id});
            this.listQuery=res.data;
            this.getParentProductCate(this.listQuery.product_category_id)
			console.log(1);
        },
        async getParentProductCate(id){
            let res = await fetchParentProductCate({id:id});
            this.productCateValue.push(res.data.parent_id)
            this.productCateValue.push(res.data.id)
        },
        submitForm(formName) {
			//validate 是一个函数，功能是对表单进行验证
			//参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
			//console.log(this.$refs[formName]);//element ui 封装的 表单组件
			console.log(this.$refs[formName]);
			this.$refs[formName].validate((valid)=>{
				console.log(valid);
				if(valid){
					console.log('可以提交表单');
					this.brandOptions.forEach((i)=>{
						if(i.id==this.listQuery.brand_id){
							this.listQuery.brand_name=i.name;
						}
					})
					this.productCateOptions.forEach((i)=>{
						i.children.forEach((j)=>{
							if(j.value==this.listQuery.product_category_id){
								this.listQuery.product_category_name=j.label;
							}
						})
					})
					console.log(this.listQuery);
					//调用 后台接口,添加 商品数据
					updateProduct(this.listQuery).then((res)=>{
						console.log(res);
						if(res.status==200){
							this.$message({
								message:'商品记录修改成功~',
								type:'success'
							})
							this.$router.push('/pms/product')
						}else{
							console.log('验证失败');
							return false
						}
					})
				}
			})
		},
	},
    mounted(){
        this.getCateList();
		this.getOneProduct();
    },
	mixins: [productmixing],
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.title-col {
		border: 1px solid #ebeef5;
		margin-bottom: 10px;
		padding: 20px;
	}
}
</style>
